<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jCarousel Examples</title>
<link href="dynamic_ajax_files/style.css" rel="stylesheet" type="text/css">

<!--
  jQuery library
-->
<script type="text/javascript" src="dynamic_ajax_files/jquery-1.js"></script>

<!--
  jCarousel library
-->
<script type="text/javascript" src="dynamic_ajax_files/jquery.js"></script>

<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="dynamic_ajax_files/skin.css">

<script type="text/javascript">

function mycarousel_itemLoadCallback(carousel, state)
{
    // Since we get all URLs in one file, we simply add all items
    // at once and set the size accordingly.
    if (state != 'init')
        return;

    jQuery.get('dynamic_ajax.txt', function(data) {
        mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, data);
    });
};

function mycarousel_itemAddCallback(carousel, first, last, data)
{
    // Simply add all items at once and set the size accordingly.
    var items = data.split('|');

    for (i = 0; i < items.length; i++) {
        carousel.add(i+1, mycarousel_getItemHTML(items[i]));
    }

    carousel.size(items.length);
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(url)
{
    return '<img src="' + url + '" width="75" height="75" alt="" />';
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        itemLoadCallback: mycarousel_itemLoadCallback
    });
});

</script>
</head>
<body>
<div id="wrap">
  <h1>jCarousel</h1>
  <h2>Riding carousels with jQuery</h2>

  <h3>Carousel with dynamic content loading via Ajax</h3>
  <p>
    The data is loaded dynamically from a simple text file which contains the image urls.
  </p>

  <div class=" jcarousel-skin-ie7"><div style="position: relative; display: block;" id="mycarousel" class="jcarousel-container jcarousel-container-horizontal">
    <div style="position: relative;" class="jcarousel-clip jcarousel-clip-horizontal"><ul style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: -252px; width: 1085px;" class="jcarousel-list jcarousel-list-horizontal"><li jcarouselindex="1" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel_h jcarousel-item-1 jcarousel-item-1-horizontal"><img src="dynamic_ajax_files/199481236_dc98b5abb3_s.jpg" alt="" height="75" width="75"></li><li jcarouselindex="2" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel_h jcarousel-item-2 jcarousel-item-2-horizontal"><img src="dynamic_ajax_files/199481072_b4a0d09597_s.jpg" alt="" height="75" width="75"></li><li jcarouselindex="3" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel_h jcarousel-item-3 jcarousel-item-3-horizontal"><img src="dynamic_ajax_files/199481087_33ae73a8de_s.jpg" alt="" height="75" width="75"></li><li jcarouselindex="4" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel_h jcarousel-item-4 jcarousel-item-4-horizontal"><img src="dynamic_ajax_files/199481108_4359e6b971_s.jpg" alt="" height="75" width="75"></li><li jcarouselindex="5" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel_h jcarousel-item-5 jcarousel-item-5-horizontal"><img src="dynamic_ajax_files/199481143_3c148d9dd3_s.jpg" alt="" height="75" width="75"></li><li jcarouselindex="6" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel_h jcarousel-item-6 jcarousel-item-6-horizontal"><img src="dynamic_ajax_files/199481203_ad4cdcf109_s.jpg" alt="" height="75" width="75"></li><li jcarouselindex="7" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel_h jcarousel-item-7 jcarousel-item-7-horizontal"><img src="dynamic_ajax_files/199481218_264ce20da0_s.jpg" alt="" height="75" width="75"></li><li jcarouselindex="8" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel_h jcarousel-item-8 jcarousel-item-8-horizontal"><img src="dynamic_ajax_files/199481255_fdfe885f87_s.jpg" alt="" height="75" width="75"></li><li jcarouselindex="9" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel_h jcarousel-item-9 jcarousel-item-9-horizontal"><img src="dynamic_ajax_files/199480111_87d4cb3e38_s.jpg" alt="" height="75" width="75"></li><li jcarouselindex="10" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel_h jcarousel-item-10 jcarousel-item-10-horizontal"><img src="dynamic_ajax_files/229228324_08223b70fa_s.jpg" alt="" height="75" width="75"></li>
      <!-- The content will be dynamically loaded in here -->
    </ul></div>
  <div disabled="false" style="display: block;" class="jcarousel-prev jcarousel-prev-horizontal"></div><div disabled="false" style="display: block;" class="jcarousel-next jcarousel-next-horizontal"></div></div></div>

</div>


</body></html>